<!--
 * @Author: QinJiu
 * @Date: 2022-01-06 08:42:09
 * @LastEditors: Qinjiu
 * @LastEditTime: 2023-01-06 18:55:22
 * @Description:
-->

<template>
  <div
    ref="wrapRef"
    class="chart-wrap"
    :style="{
      width: _.isNumber(width) ? `${width}px` : width,
      height: _.isNumber(height) ? `${height}px` : height,
    }"
  >
    <div
      ref="chartRef"
      class="chart-container"
      :class="{
        hide: !loading && noData,
      }"
      style="width: 100%; height: 100%"
      @resize="resize"
    />
    <!-- 没有正在加载 && 无数据 -->
    <div v-if="!loading && noData" class="empty-container">
      <SvgIcon iconClass="no-data" style="width: 60%; height: 60%" />
    </div>
  </div>
</template>

<script>
import _ from "lodash";
// import * as echarts from "echarts";

// class MyEcharts extends echarts.init {
//   constructor(initOptions = {}) {
//     super(initOptions.dom);
//   }
// }

const noop = () => {};

export default {
  props: {
    width: {
      type: [Number, String],
      default: "100%",
    },
    height: {
      type: [Number, String],
      default: "100%",
    },
    /**
     * ECharts 的万能接口。修改这个 prop 会触发 ECharts 实例的 setOption 方法
     */
    option: {
      type: Object,
      default: () => {},
    },
    /**
     * 图表是否处于加载状态
     */
    loading: {
      type: Boolean,
      default: false,
    },
    /**
     * 图表在组件根元素尺寸变化时是否需要自动进行重绘
     */
    autoresize: {
      type: Boolean,
      default: true,
    },
    /**
     * 要应用的主题。请参考 echarts.init 的 theme 参数
     */
    theme: {
      type: [Object, String],
      default: "",
    },
    /**
     * 初始化附加参数。请参考 echarts.init 的 opts 参数
     */
    initOptions: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      /**
       * echarts图表实例
       */
      echartsIns: null,
      /**
       * 无数据
       */
      noData: false,
    };
  },
  watch: {
    /**
     * 图表option
     */
    option: {
      handler(option) {
        this.setOption(option);
      },
      deep: true,
    },
    /**
     * 图表loading
     */
    loading(status) {
      if (status) {
        this.showLoading();
      } else {
        this.hideLoading();
      }
    },
  },
  mounted() {
    this.initChart();
    if (this.autoresize) {
      window.addEventListener("resize", this.resize);
    }
  },
  destroyed() {
    if (this.autoresize) {
      window.removeEventListener("resize", this.resize);
    }
  },
  methods: {
    /**
     * @description: 初始化chart实例
     */
    initChart() {
      this.echartsIns = this.$echarts.init(this.$refs.chartRef, this.theme, this.initOptions);
      this.$emit("init", this.echartsIns);

      this.setOption(this.option);
    },
    /**
     * 设置option
     */
    setOption(option = {}) {
      if (option && !_.isEmpty(option)) {
        this.noData = false;
        this.echartsIns && this.echartsIns.setOption(option);
      } else {
        this.noData = true;
      }
    },
    /**
     * 改变图表尺寸
     */
    resize() {
      this.echartsIns && this.echartsIns.resize();
    },
    /**
     * 显示加载动画效果
     */
    showLoading(type = "default", opts = {}) {
      this.echartsIns && this.echartsIns.showLoading(type, opts);
    },
    /**
     * 隐藏动画加载效果
     */
    hideLoading() {
      this.echartsIns && this.echartsIns.hideLoading();
    },
  },
};
</script>

<style lang="less" scoped>
.chart-wrap {
  position: relative;
  .chart-container {
    &.hide {
      opacity: 0;
    }
  }
  .empty-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
    font-weight: bold;
    color: #f40;
  }
}
</style>
